import React, { useState, useEffect } from 'react'
import { NavBar, Toast, SearchBar } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import axios from 'axios'
import './xun.css'

export default function Xun() {
  const navigate = useNavigate()
  const [TypeList, setTypeList] = useState([])
  const [contentList, setContentList] = useState([])
  const [name, setname] = useState('传统戏剧')
  const [idx, setidx] = useState('67a6f3d032c1bb2d26d1ed84')
  const back = () =>
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })

  const handlerSearch = () => {
    navigate('/search')
  }

  const getType = async () => {
    const res = await axios.get('http://localhost:3000/getType')
    setTypeList(res.data.type)
  }

  const getContent = async () => {
    const res = await axios.get('http://localhost:3000/getContent')
    setContentList(res.data.content)
  }

  const handlerClick1 = (id, name) => {
    setname(name)
    setidx(id)
  }

  const gotoXiang=(item)=>{
    navigate('/xiang',{state:item})
  }

  useEffect(() => {
    getType()
    getContent()
  }, [])

  return (
    <div>
      <NavBar onBack={back}>
        <SearchBar placeholder='寻找你想了解的非遗文化' onFocus={() => { handlerSearch() }} />
      </NavBar>
      <ul className='ul1'>
        {TypeList.map(item => {
          return <li style={{ fontWeight: idx === item._id ? 'bold' : 'normal', borderBottom: idx === item._id ? '2px solid red' : '' }} onClick={() => { handlerClick1(item._id, item.name) }} key={item._id}>{item.name}</li>
        })}
      </ul>
      <div className='box1'>
        {contentList.filter(item => item.type === name).map(item => {
          return <div onClick={()=>{gotoXiang(item)}} key={item._id}>
            <img className='img1' src={item.img1}/>
            <p className='p1'>{item.name}</p>
          </div>
        })}
      </div>
    </div>
  )
}
